
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="/static/css/default.css" rel="stylesheet" type="text/css">
<link href="/static/css/style/green.css" rel="stylesheet" type="text/css" id = 'link'>
<link href="/static/js/datepicker/css/bootstrap-datepicker.css" rel="stylesheet">  
</head>

<body style="padding:15px 8px 0px 8px;" >



<div class="classify">{$parenttitle}</div>
<ul class="toolbar">
        <li>开始日期: <input type="text" style="width:120px;" class="forminput inputstyle"  onfocus="WdatePicker()"  id="date1" value="{$date1}"></li>
        <li>结束日期: <input type="text" style="width:120px;" class="forminput inputstyle"  onfocus="WdatePicker()"  id="date2" value="{$date2}"></li>
		<li>学号：<input type="text" style="width:120px;" class="forminput inputstyle" id="number" value="{$number}"></li>
		<li>姓名<input type="text" style="width:120px;" class="forminput inputstyle" id="truename" value="{$truename}"></li>
		<li>班级

			<select type="text" id="classid" class="select" v-model="classid">
				<option value="">
					请选择
				</option>
				<option v-for="item in list" :value='item.id'>
					{{item.classname}}
				</option>
			</select>
		</li>
        <li><a href="#" class="selected" id="search">查询</a></li>
        <li><a href="#" class="selected" id="clear">重置</a></li>

	</ul>
<div class="tablebox"  id="main">
			
	<table>
    
    	<thead>
            <th class="num"></th>
			<th>姓名</th>
			<th>班级</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>天数</th>
            <th>理由</th>
			<th>审批人</th>
		
			<th>状态</th>
			<th>回复内容</th>
         
        </thead>
        
        <tbody>
        
      
            <tr  v-for="uitem in arrayData">
                <td><input type="checkbox"></td>
                
				<td>{{uitem.studentname}}</td>
				<td>{{uitem.classname}}</td>
                <td>{{uitem.stime}}</td>
                <td>{{uitem.etime}}</td>
                <td>{{uitem.day}}</td>
				  <td>{{uitem.desc}}</td>
					<td>{{uitem.teachername}}</td>
					<td>
							<span v-if="uitem.state==0">未审批</span>
							<span v-if="uitem.state==1">同意</span>
							<span v-if="uitem.state==-1">不同意</span>
						  </td>
					  <td>{{uitem.result}}</td>
                       
               
              </tr>
            </tr>
            
          
                        
        </tbody>        
    
    </table>
	
	<div class="pagination">

    <!-- <li><a href="#">尾页</a></li> -->
		<vue-nav :cur="cur" :all="all" :allcount="allcount" :callback="callback"></vue-nav>   
		 
    
    
  
</div>
</div>
<!--tablebox end-->

<!--pagination start-->


<!--pagination end-->

</body>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>

<script src="/static/js/layer/layer.js"></script>

<script type="text/javascript" src="/static/js/vue2.js"></script>
<script type="text/javascript" src="/static/js/vue-nav.js"></script>
<script src="/static/My97DatePicker/WdatePicker.js"></script>
<script>
      var menu = new Vue({
		el: '#classid',
		data: {
			classid: "{$classid}",
			list: []
		},
		methods: {
			getdata: function () {
				var _self = this;//保存this的指向

				$.get('/Index/Myclass/GetMyClassList', function (data) {
					_self.list = data;
				});
			}

		},
		created: function () {  //初始化事件里边去调用查询方法
			this.getdata();
		}
	});
var vm = new Vue({
                el: "#main",
                data: {
					cur: 1,
					all: 0,
					size:10,
					allcount:0,
					arrayData: [],
					
				},
				components:{
				  'vue-nav': Vnav
			    },
                methods: {
                    getdata: function (_keycontent) {  //查询数据
					
						var self = this;
                        var number =$("#number").val();
                        var truename =$("#truename").val();
                        var classid =$("#classid").val();
                        var date1 =$("#date1").val();
                        var date2 =$("#date2").val();
                         $.get("/Index/daily/getLeave", {page: self.cur ,size : self.size,number:number,truename:truename,classid:classid,date1:date1,date2:date2}, function (_result) {
                            self.arrayData = _result.list;
							self.all =_result.count;
							self.allcount= _result.allcount
                        });
                       
                    },
					callback:function(data) {
					
						var self = this;
						this.cur = data;
                        var number =$("#number").val();
                        var truename =$("#truename").val();
                        var classid =$("#classid").val();
                        var date1 =$("#date1").val();
                        var date2 =$("#date2").val();
						$.get("/Index/daily/getLeave", {page: self.cur ,size : self.size,number:number,truename:truename,classid:classid,date1:date1,date2:date2}, function (_result) {
                           
							self.arrayData = _result.list;
							self.all =_result.count;
							self.allcount= _result.allcount
                        });
					}
					
                },
                created: function () {  //初始化事件里边去调用查询方法
                   this.getdata("");
                }
 });
 $("#search").click(function () {
		
		vm.getdata("");
	});
    $("#clear").click(function () {
		$("#number").val("");
		$("#truename").val("");
	    $("#classid").val("");
        $("#date").val("");
		
	});

</script>
</html>
